﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>树表控件</title>
        <link href="style/demo.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
        table,td,th {  border: 1px solid #8DB9DB; padding:5px; border-collapse: collapse; font-size:16px; }
        </style>

        <!--引用的文件 Begin-->
        <script type="text/javascript" src="../script/jquery.js"></script>
        <script src="../script/treeTable/jquery.treeTable.js" type="text/javascript"></script>
        <!--引用的文件 End-->
        <script type="text/javascript">
        $(function(){
            var option = {
                theme:'vsStyle',
                expandLevel : 2,
                beforeExpand : function($treeTable, id) {
                    //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
                    if ($('.' + id, $treeTable).length) { return; }
                    //这里的html可以是ajax请求
                    var html = '<tr id="8" pId="6"><td>1.2.1</td><td>楼栋3</td><td><input type="text" id ="usetree1.2.1" value ="100"/></td></tr>'
                             + '<tr id="9" pId="6"><td>1.2.2</td><td>楼栋4</td><td><input type="text" id ="usetree1.2.2" value ="100"/></td></tr>';

                    $treeTable.addChilds(html);
                },
                onSelect : function($treeTable, id) {
                    window.console && console.log('onSelect:' + id);
                    
                }
            };
            $('#treeTable1').treeTable(option);

            option.theme = 'default';
            $('#treeTable2').treeTable(option);
        });
           // $("^div_1")
        </script>
    </head>
    <body>
    <div id="page">
        <h1><span>treeTable <em>v 1.4.2</em></span></h1>
           
        <fieldset>
         
            <table id="treeTable2" style="width:100%">
                <tr>
                    <td style="width:200px;">华夏幸福基业demo</td>
                    <td>名称</td>
                    <td>面积m2</td>
                </tr>
                <tr id="1">
                    <td><span controller="true">1</span></td>
                    <td>项目1</td>
                <td><input type="text" id ="usetree1" value ="400"/></td>

                </tr>
                <tr id="2" pId="1">
                    <td><span controller="true">1.1</span></td>
                    <td>标段1</td>
                 <td><input type="text" id ="usetree1.1" value ="200" change/></td>

                </tr>
                <tr id="3" pId="2">
                    <td>1.1.1</td>
                    <td>楼栋1</td>
                     <td><input type="text" id ="usetree1.1.1" value ="100"/></td>
                </tr>
                <tr id="4" pId="2">
                    <td>1.1.2</td>
                    <td>楼栋2</td>
                       <td><input type="text" id ="usetree1.1.2" value ="100"/></td>
                </tr>
                <tr id="6" pId="1" hasChild="true">
                    <td>1.2</td>
                    <td>标段2</td>
                       <td><input type="text" id ="usetree1.2" value ="200"/></td>
                </tr>
                <tr id="7">
                    <td>2</td>
                    <td>项目2</td>
                       <td><input type="text" id ="usetree2" value ="100"/></td>
                </tr>
            </table>
        </fieldset>
    </div>
    </body>
</html>
